<template>
  <div>
    <el-dialog title="回复请求" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="回复内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.contactInfo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="accept">确 定</el-button>
      </div>
    </el-dialog>
    <el-table key="1" ref="multipleTable" stripe v-if="tableType == 1" :height="530" :data="teacherList" border
      style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
      <el-table-column prop="teacherName" label="导师姓名" width="100"> </el-table-column>
      <el-table-column prop="university" label="学校" width="130"> </el-table-column>
      <el-table-column prop="department" label="学院" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="searchWay" label="研究方向" width="140">
        <template slot-scope="scope">
          <el-tag style="margin-right: 4px;" v-for="item in scope.row.searchWay.split(';')" :key="item"
            type="success">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hindex" label="H-index" width="150">
      </el-table-column>
      <el-table-column prop="studentContactInfo" label="学生联系方式" width="120" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="studentMessage" label="学生带话" width="140" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="contactStatus" label="联系状态" width="100" fixed="right">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.contactStatus == 0">待回复</el-tag>
          <el-tag type="success" v-else-if="scope.row.contactStatus == 1">已互选</el-tag>
          <el-tag type="danger" v-else>被拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.contactStatus != 0" type="danger" size="small"
            @click="withdraw(scope.row)">撤回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table key="2" ref="multipleTable" v-else-if="tableType == 2" :height="530" :data="teacherList" border
      style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
      <el-table-column prop="teacherName" label="导师姓名" width="100"> </el-table-column>
      <el-table-column prop="university" label="学校" width="100" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="department" label="学院" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="title" label="职称" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="hindex" label="H-index" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="searchWay" label="研究方向" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag style="margin-right: 4px;" v-for="item in scope.row.searchWay.split(';')" :key="item"
            type="success">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="teacherContactInfo" label="联系方式" width="100" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="teacherMessage" label="其他" width="180" show-overflow-tooltip> </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.contactStatus == 2" @click="handleAccept(scope.row)" type="primary"
            size="small">接受</el-button>
          <el-button :disabled="scope.row.contactStatus == 2" type="danger" size="small"
            @click="refuse(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table key="3" ref="multipleTable" v-else :height="530" :data="teacherList" border style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
      <el-table-column prop="teacherName" label="导师姓名"> </el-table-column>
      <el-table-column prop="university" label="学校"> </el-table-column>
      <el-table-column prop="department" label="学院" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="teacherContactInfo" label="导师联系方式"> </el-table-column>
      <el-table-column prop="teacherMessage" label="导师带话" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="studentContactInfo" label="学生联系方式"> </el-table-column>
      <el-table-column prop="studentMessage" label="学生带话"> </el-table-column>
      <el-table-column prop="initiator" label="发起人">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.initiator == 'student'">学生</el-tag>
          <el-tag type="warning" v-else>导师</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class=" flex-center" style="display: flex;margin-top: 5px;" :current-page="pages.pageNum" background
      layout="prev, pager, next" :total="totalPage">
    </el-pagination>
  </div>
</template>

<script>
import TeacherService from "@/service/TeacherService";
import RecommendService from '@/service/RecommendService';
import { Message } from 'element-ui';
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      tableData: [],
      teacherList: [],
      form: {
        content: "",
        contactInfo: "",
      },
      rowInfo: [],
      pages: {
        pageSize: 10,
        pageNum: 1
      },
      totalPage: 0
    };
  },
  methods: {
    handleAccept(row) {
      this.dialogFormVisible = true
      this.rowInfo = row
    },
    async allContact() {
      const params = {
        id: sessionStorage.getItem("userId"),
        ...this.pages
      }
      try {
        const response = await RecommendService.acceptAllContact(params)
        if (response.code == 0) {
          this.tableData = response.data.data
          this.totalPage = response.data.total
          this.tableData?.forEach(ls => {
            this.getTeacherInfo(ls)
          });
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async accept() {
      const params = {
        contact_id: this.rowInfo.contactId,
        accept_info: this.form.contactInfo,
        accept_message: this.form.content,
        initiator: "teacher",
      };
      try {
        const response = await RecommendService.acceptContact(params)
        if (response.code == 0) {
          Message.success("接受成功")
          this.teacherList = []
          this.getContactReceive()
          this.dialogFormVisible = false
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async refuse(row) {
      const params = {
        teacherId: row.teacherId,
        studentId: row.studentId
      }
      try {
        const response = await RecommendService.refuseContact(params)
        if (response.code == 0) {
          Message.success("拒绝请求")
          this.teacherList = []
          this.getContactReceive()
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async getSendList() {
      const params = {
        id: sessionStorage.getItem("userId")
      }
      try {
        const response = await RecommendService.getSendContact(params)
        if (response.code == 0) {
          this.tableData = response.data
          this.tableData?.forEach(ls => {
            this.getTeacherInfo(ls)
          });
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async getTeacherInfo(teacher) {
      try {
        const response = await TeacherService.getTeacherInfo({ id: teacher.teacherId })
        if (response.code == 0) {
          let res = response.data
          if (res.searchWay==null) res.searchWay=""
          this.teacherList.push({
            ...res,
            ...teacher
          })
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async withdraw(row) {
      try {
        const response = await RecommendService.withdraw({ contactId: row.contactId })
        if (response.code == 0) {
          Message.success("撤回成功")
          this.tableData = []
          this.teacherList = []
          this.getSendList()
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async getContactReceive() {
      try {
        const response = await RecommendService.getContactList({ id: sessionStorage.getItem("userId") })
        if (response.code == 0) {
          this.tableData = response.data
          this.tableData?.forEach(ls => {
            if (ls.contactStatus == 0) {
              this.getTeacherInfo(ls)
            }
          });
        }
      } catch (error) {
        Message.error(error)
      }
    },
  },
  props: {
    tableType: {
      type: Number,
      default: 1
    }
  },
  // activated() {
  //   console.log("active")
  //   this.tableData = []
  //   this.teacherList = []
  //   if (this.tableType == 1) {
  //     this.getSendList()
  //   } else if (this.tableType == 2) {
  //     this.getContactReceive()
  //   } else {
  //     this.allContact()
  //   }
  //   this.$nextTick(() => {
  //     this.$refs.multipleTable.doLayout();
  //   });
  // },
  watch: {
    tableType: {
      handler: function (newV, oldV) {
        this.tableData = []
        this.teacherList = []
        if (newV != oldV) {
          if (newV == 1) {
            this.getSendList()
          } else if (newV == 2) {
            this.getContactReceive()
          } else {
            this.allContact()
          }
        }
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      deep: true,
      immediate: true
    }
  }
};
</script>